<template>
    <div class="container">
        <h1>校园食堂代买餐平台</h1>
        <h2>处理投诉</h2>
        <form @submit.prevent="submitForm" class="demand-form">
          <div class="form-group">
            <label for="ID">投诉编号:</label>
            <input type="text" id="ID" v-model="order.ID" required readonly />       
          </div>
          <div class="form-group">
            <label for="OrderID">订单编号:</label>
            <input type="text" id="OrderID" v-model="order.OrderID" required readonly />       
          </div>
          <div class="form-group">
            <label for="ComplaintType">投诉类型:</label>
            <input type="text" id="ComplaintType" v-model="order.ComplaintType" required readonly />       
          </div>
          <div class="form-group">
            <label for="ComplaintReason">投诉原因:</label>
            <input type="text" id="ComplaintReason" v-model="order.ComplaintReason" required readonly />       
          </div>
          <div class="form-group">
            <label for="card">被投诉ID:</label>
            <input type="text" id="card" v-model="order.Complained" required readonly/>
            <button type="button" class="pull-black-button" @click="pullblack">拉黑</button>
          </div>
          <div class="form-group">
            <label for="ComplaintContent">处理意见:</label>
            <input type="text" id="ComplaintContent" class="expanded-text-box" v-model="order.ComplaintContent" required rows= 4 cols= 10 />
          </div>
          <button type="submit" class="submit-button">提交意见</button>
        </form>
    </div>
</template>
    
<script setup>
import { ref,getCurrentInstance } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';

const router = useRouter();
const instance = getCurrentInstance();
const ID = instance.proxy.$route.params.ID
const orderID = instance.proxy.$route.params.OrderID
const complaintType = instance.proxy.$route.params.Type
const complaintReason = instance.proxy.$route.params.reason
const complaintContent = instance.proxy.$route.params.content
const complained = instance.proxy.$route.params.complained

const order = ref({
  ID: ID,
  OrderID: orderID,
  ComplaintType: complaintType,
  ComplaintReason: complaintReason,
  ComplaintContent: complaintContent,
  Complained: complained
})


const submitForm = async () => {
  const formData = new URLSearchParams();
  for (const [key, value] of Object.entries(order.value)) {
    formData.append(key, value);
  }
  try {
    if (order.value.OrderID === '' || order.value.ComplaintType === '' || order.value.ComplaintContent === '') {
      alert('请完整填写所有信息')
    } else {
      const response = axios.post('http://localhost:8080/deal-complaint', formData)
      response.then( res =>{
        if(res.data.success){
          alert('处理成功')
          router.push('/admin-dashboard')
        }else{
          alert('处理失败')
        }
      })
    }
  } catch (error) {
    console.log(error)
    alert('投诉失败')
  }
}

const pullblack = () => {
  if (confirm('确认将该用户拉黑？')){
    const formData = new URLSearchParams();
    formData.append('ID', order.value.Complained)
    axios.post('http://localhost:8080/pull-black', formData)
    .then(res => {
       if (res.data.success) {
         alert('拉黑成功')
       } else {
         alert('拉黑失败, 请重试')
       }
    })
  }
}
</script>

<style scoped>
    .container {
    max-width: 700px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  h1 {
    color: #333;
    margin-bottom: 20px;
  }
  h2 {
    color: #333;
    margin-bottom: 15px;
  }

.demand-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
}

.form-group select {
  width: 82.5%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 80%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.submit-button:hover {
  background-color: #45a049;
}

.expanded-text-box {
  width: 100%;
  height: 100px;
  padding: 10px;
  font-size: 16px;
}
.pull-black-button {
  width: 8%;
  padding: 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
.pull-black-button:hover {
  background-color: #da190b;
}
</style>